<template>
  <div class="dashboard-container">
    <div>
      <!-- <img
        v-imgerror="defualtImg"
        width="250"
        src="http://www.chinaunicom.com.cn/img/bussiness_02.jpg"
        alt=""
      > -->

      <!-- 1. 不封装组件的用法 -->
      <!-- <svg>
        <use xlink:href="#icon-dashboard" />
      </svg>
      <svg>
        <use xlink:href="#icon-example" />
      </svg> -->

      <!-- 2. 封装组件的用法 -->
      <!-- <svg-icon icon-class="example" />
      <svg-icon icon-class="dashboard" /> -->

      <!-- <test />

      <el-date-picker v-model="value" />
      <el-date-picker type="year" /> -->

      <!-- 3. 测试使用Excel上传组件 -->
      <!-- <upload-excel
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      /> -->

      <!-- 4. 测试导出Excel -->
      <!-- <el-button
        :loading="downloadLoading"
        size="small"
        type="danger"
        @click="handleExcelExport"
      >excel导出</el-button> -->

      <!-- 5. 测试图片上传 -->
      <upload-image :limit="1" />
    </div>
  </div>
</template>

<script>
// import Test from './components/Test.vue'
export default {
  name: 'Dashboard',
  components: {
    // Test
  },
  data() {
    return {
      defualtImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2944476239,2235255584&fm=26&gp=0.jpg',
      value: '2022-01-02',
      downloadLoading: false
    }
  },
  computed: {

  },
  methods: {
    /**
     * 在Excel文件上传之前被调用
     * 作用: 一般用于做文件上传之前的校验, 比如: 文件大小
     */
    beforeUpload(file) {
      console.log('我被调用了', file)

      // 文件的大小默认单位是字节(B) 1024B = 1KB  1024KB = 1MB ...
      // 把上传的文件大小由B --> MB, 并判断是否 < 1MB
      const isLt1M = file.size / 1024 / 1024 < 1

      // 如果<1MB, 则校验通过, 返回true
      if (isLt1M) {
        return true
      }

      // 校验不通过, 返回false
      this.$message({
        message: '请不要上传大小超过1MB的文件',
        type: 'warning'
      })
      return false
    },
    /**
     * 文件上传成功后被调用
     * 作用: 把从文件中读取到的内容返回
     */
    handleSuccess(obj) {
      console.log('我成功了', obj)
      console.log(obj.header) // 获取到Excel文件的表头信息
      console.log(obj.results) // 获取到Excel文件的主体内容
      // this.tableData = results
      // this.tableHeader = header
    },
    handleExcelExport() {
      this.downloadLoading = true
      // 8.1 懒加载Export2Excel模块(只有点击了导出按钮才会加载)
      // 第一次加载后会有缓存, 后面直接用
      import('@/vendor/Export2Excel').then(excel => {
        // console.log(excel)

        // 8.2 调用模块中把JSON数据导出Excel方法
        excel.export_json_to_excel({
          // 表头
          header: ['姓名', '学号', '年龄', '简介'],
          // 主体内容 --> 二维数组 --> [[],[],[]]
          /**
           问: 为什么Excel导出的数据是一个二维数组(数组型数组), 而不是常用的对象型数组?
           答: 对象是无序的, 数组是有序的
           外面的大数组能够保证Excel表中每一行是有序的
           里面的小数组能够保证每一行中每个单元格的内容是有序的
           */
          data: [
            ['张三', '10001', 18, '是一个小帅哥'],
            ['李四', '10002', 20, '是一个小美女']
          ],
          filename: '学生表', // 导出的文件名
          autoWidth: true, // 是否根据内容自动调整单元格宽度(非必填)
          bookType: 'xls' // 导出的文件格式
        })
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

 // scoped是让样式作用于当前组件
 // ::v-deep是进入深度穿透, 子组件也能用这里面的样式
 ::v-deep {
    .demo {
      width: 300px;
      height: 100px;
      background-color: red;
    }
  }
</style>
